import React from "react"
import {
    DownloadOutlined,
    RotateLeftOutlined,
    RotateRightOutlined,
    SwapOutlined,
    UndoOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
} from '@ant-design/icons'
import { Image, Space } from 'antd'
import { useDownload } from "@/hooks/useDownload"
import imgError from '@/assets/images/img_error.png'

const onDownload = (url: string) => {
    useDownload(url)
}

const ImagePreview: React.FC<{ url: string }> = (props) => {
    const { url } = props
    return <Image
        width={150}
        style={{borderRadius: 5}}
        src={url}
        fallback={imgError}
        preview={{
            toolbarRender: (
                _,
                {
                    transform: { scale },
                    actions: {
                        onFlipY,
                        onFlipX,
                        onRotateLeft,
                        onRotateRight,
                        onZoomOut,
                        onZoomIn,
                        onReset
                    }
                }
            ) => (
                <Space size={12}>
                    <DownloadOutlined onClick={() => onDownload(url)} />
                    <SwapOutlined rotate={90} onClick={onFlipY} />
                    <SwapOutlined onClick={onFlipX} />
                    <RotateLeftOutlined onClick={onRotateLeft} />
                    <RotateRightOutlined onClick={onRotateRight} />
                    <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
                    <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
                    <UndoOutlined onClick={onReset} />
                </Space>
            )
        }}
    />
}

export default ImagePreview